<template>
    <div class="cont">
        <div class="inp">
            <label class="iconfont icon-zhanghu"></label>
            <input type="number" placeholder="手机号码" v-model.trim="iphone">
        </div>
        <div class="inp">
            <label class="iconfont icon-mima"></label>
            <input class="yzm" type="text" placeholder="短信验证码" v-model.trim="message">
            <span @click="countDown">{{textVal}}</span>
        </div>
        <div class="btn">
            <div class="btnText" @click="login">
                <span>登录</span>
            </div>
        </div>
    </div>
</template>
<script>
import Qs from 'qs'
export default {
    name: 'Message',
    data () {
        return {
            textVal: '获取验证码',
            count: 60,
            canClick: true, //添加canClick
            iphone: '',
            message: ''
        }
    },
    methods: {
        countDown () {
            if (!this.canClick) return
            this.canClick = false
            this.textVal = this.count + 's后重新获取'
            let clock = window.setInterval(() => {
                this.count--
                this.textVal = this.count + 's后重新获取'
                if (this.count < 0) {
                    window.clearInterval(clock)
                    // this.textVal = '重新获取'
                    this.textVal = '获取验证码'
                    this.count = 60
                    this.canClick = true  //这里重新开启
                }
            },1000)
        },
        login () {
            const reg = /^1[34578]\d{9}$/;
            let iphone = reg.test(this.iphone)
            if (iphone && this.message != '') {
                this.$axios.post('http://192.168.1.26:8080/app/mock/16/api/message', Qs.stringify({
                    iphone: this.iphone,
                    message: this.message
                })).then((res) => {
                    this.$router.push({
                        path: '/Home'
                    })
                    sessionStorage.setItem("loginIphone", this.iphone);
                    sessionStorage.setItem("message", this.message);
                    sessionStorage.setItem("token", res.data.page.token);
                    sessionStorage.setItem("money", res.data.page.money);
                })
            }
        }
    }
}
</script>
<style scoped lang="less">
.cont{
    width: 100%;
    height: 2.666667rem;
    padding: 0 1.333333rem;
}
.inp{
    width: 100%;
    height: 1.333333rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    background: #fff;
    border-top: 1px solid #ccc;
    padding: 0 .266667rem;
    label{
        display: block;
        width: .426667rem;
        height: .426667rem;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        color: #ccc;
    }
    input{
        width: 5.9rem;
        height: .933333rem;
        margin-left: .2rem;
        border: none;
        outline: none;
        font-size:12px;
    }
    input::-webkit-input-placeholder{
        font-size:12px;
        font-family:ArialMT;
        color:rgba(204,204,204,1);
        line-height:14px;
        letter-spacing:1px;
    }
    .yzm{
        width: 3.6rem;
        height: .933333rem;
        margin-right: .133333rem
    }
    span{
        display: block;
        // width: 2rem;
        // height: .733333rem;
        width: 2.4rem;
        height: .75rem;
        border-radius: .066667rem;
        background: #FFC726;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-size:12px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(177,95,88,1);
        line-height:17px;
        letter-spacing:1px;
    }
}
.btn{
    width: 100%;
    height: 1.28rem;
    background: #fff;
    margin-top: .613333rem;
    .btnText{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        span{
            font-size:18px;
            font-family:Arial-BoldMT;
            font-weight:normal;
            color:rgba(255,199,38,1);
            line-height:21px;
            letter-spacing:1px;
        }
    }
}
</style>
